<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>我的地址</h2>
    <ul>
        <li v-for="a in addresses">
            <input type="radio" v-model="addressId" :value="a.id"/>
            姓名:{{a.name}} 地址:{{a.address}} 电话:{{a.phone}} 是否常用地址:{{a.status === 1 ? '是' : ''}}
        </li>
    </ul>
    <div>
        姓名：<input v-model="saveForm.name"/><br/>
        地址：<input v-model="saveForm.address"/><br/>
        手机号：<input v-model="saveForm.phone"/><br/>
        是否常用地址：
        常用地址：<input type="radio" name="status" v-model="saveForm.status" value="1"/>
        非常用地址：<input type="radio" name="status" v-model="saveForm.status" value="0"/>
        <br/>
        <button @click="saveAddress">添加新地址</button>
    </div>
    <hr/>
    <h2>我的订单信息</h2>
    <ul>
        <li v-for="e in orders">
            书名：{{e.name}} 价格:{{e.price}} 数量:{{e.number}}
        </li>
    </ul>
    <hr/>
    <button @click="toPay">去支付</button>
</div>
</body>
</html>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                orders: [],
                addresses: [],
                saveForm: {
                    name: '',
                    address: '',
                    phone: '',
                    status: 0
                },
                addressId: ''
            }
        },
        methods: {
            loadOrder() {
                let o = sessionStorage.getItem('ORDER_THIS')
                this.orders = JSON.parse(o)
                console.log(this.orders)
            },
            loadAddress() {
                axios({
                    method: 'get',
                    url: 'http://localhost:9000/address',
                    headers: {
                        token: localStorage.getItem('bookstore_front_token')
                    }
                }).then(resp => {
                    this.addresses = resp.data.data
                    this.addressId = this.addresses[0].id
                })
            },
            saveAddress() {
                let data = new URLSearchParams()
                data.append('name', this.saveForm.name)
                data.append('address', this.saveForm.address)
                data.append('phone', this.saveForm.phone)
                data.append('status', this.saveForm.status)
                axios({
                    method: 'post',
                    url: 'http://localhost:9000/address',
                    data: data,
                    headers: {
                        token: localStorage.getItem('bookstore_front_token')
                    }
                }).then(resp => {
                    this.loadAddress()
                })
            },
            toPay() {
                let orderId = sessionStorage.getItem('ORDER_ID')
                let total_amount = sessionStorage.getItem('TOTAL_AMOUNT')
                location.href = 'http://localhost:9000/alipay/pay?out_trade_no=' + orderId + '&total_amount=' + total_amount + '&subject=' + orderId + "的订单&addressId=" + this.addressId
            }
        },
        created() {
            this.loadOrder()
            this.loadAddress()
        }
    })
</script>